<template>
  <div class="box">
    <div class="echartsBox" v-for="(item, index) in ChartTestData" :key="index">
      <comEcharts :id="item.id" :width="item.widthVal" :height="item.heightVal" :option='item'></comEcharts>
    </div>

  </div>
</template>

<script>
import comEcharts from '@/components/commonEcharts/comEcharts';
export default {
  components: {
    comEcharts
  },

  data() {
    return {
      ChartTestData: [
        {
          id: '1',
          widthVal: '535px',
          heightVal: '300px',
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["联盟广告", "视频广告", "搜索引擎"],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "联盟广告",
              type: "line",
              stack: "总量",
              data: [620, 782, 691, 568, 756, 660, 480],
            },
            {
              name: "视频广告",
              type: "line",
              stack: "总量",
              data: [750, 832, 791, 690, 900, 850, 780],
            },
            {
              name: "搜索引擎",
              type: "line",
              stack: "总量",
              data: [820, 932, 901, 934, 1000, 1230, 1100],
            },
          ],
        },
        {
          id: '2',
          widthVal: '535px',
          heightVal: '300px',
          title: {
            "text": "销量排行榜",
            "subtext": "排行榜的性质说明附标题",
            "x": "center"
          },
          color: ['#3398DB'], //可选色：'#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['服装', '鞋子', '帽子', '手套', '袜子'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '销售数量',
              type: 'bar',
              barWidth: '25%',
              data: [55, 80, 46, 35, 60]
            }
          ]
        },
        {
          id: '3',
          widthVal: '535px',
          heightVal: '300px',
          color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            type: "scroll",
            orient: 'vertical',
            right: '10%',
            align: 'left',
            top: 'middle',
            textStyle: {
              color: '#8C8C8C'
            },
            height: 150
          },
          series: [
            {
              name: '业务警种',
              type: 'pie',
              right: '15%',
              radius: [0, 95],


              data: [
                { value: 20, name: 'rose1' },
                { value: 30, name: 'rose2' },
                { value: 25, name: 'rose3' },
                { value: 25, name: 'rose4' },
                { value: 20, name: 'rose5' },
                { value: 35, name: 'rose6' },
                { value: 30, name: 'rose7' },
                { value: 40, name: 'rose8' }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-wrap: wrap;

  .echartsBox {
    margin: 10px
  }
}
</style>